<script setup>
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

let map = null;

onMounted(() => {
  window._AMapSecurityConfig = {
    securityJsCode: "8cba36834b1e9e52dc9a26accd27a6bf",
  };
  AMapLoader.load({
    key: "4a630b2ea3ddbf444a82cf88425e5b8a", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale","AMap.ToolBar","AMap.ControlBar","AMap.HawkEye"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then((AMap) => {
      map = new AMap.Map("container", {
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: 11, // 初始化地图级别
        center: [116.397428, 39.90923], // 初始化地图中心点位置
      });
      var scale = new AMap.Scale({
        visible: true
         
    });
   var toolBar = new AMap.ToolBar({
        visible: true,
        position: {
          top: '110px',
          right: '40px'
        }
    });
   var controlBar = new AMap.ControlBar({
        visible: true,
        position: {
          top: '10px',
          right: '10px'
        }
    });
   var overView = new AMap.HawkEye({
        visible: true,
         position: {
          top: '0px',
          left: '40px'
        }
    });
   var map = new AMap.Map("container", {
        zoom: 11,
    });
    map.addControl(scale);
    map.addControl(toolBar);
    map.addControl(controlBar);
    map.addControl(overView);

      AMap.plugin(["AMap.AutoComplete", "AMap.PlaceSearch"], function () {
  var autoOptions = {
    //城市，默认全国
    city: "北京",
    //使用联想输入的 input 的 id
    input: "keyword",
  };
  var autocomplete = new AMap.AutoComplete(autoOptions);
  var placeSearch = new AMap.PlaceSearch({
    city: "北京",
    map: map,
  });
  autocomplete.on("select", function (e) {
    //针对选中的poi实现自己的功能
    placeSearch.search(e.poi.name);
  });
});
    })
    .catch((e) => {
      console.log(e);
    });
});

onUnmounted(() => {
  map?.destroy();
});
</script>

<template>
<div> 
  <input type="text" id="keyword">
   <div id="container"></div>
 <div class='input-card'>
    <div class="input-item">
        <input type="checkbox" onclick="toggleScale(this)"/>比例尺
    </div>
    
    <div class="input-item">
        <input type="checkbox" id="toolbar" onclick="toggleToolBar(this)"/>工具条
    </div>
    
    <div class="input-item">
        <input type="checkbox" id="controlBar" onclick="toggleControlBar(this)"/>工具条方向盘
    </div>
    
    <div class="input-item">
        <input type="checkbox" id="overview" checked onclick="toggleOverViewShow(this)"/>显示鹰眼
    </div>
</div>
</div>
 
</template>

<style scoped>
#container {
  width: 100%;
  height: 800px;
}
</style>
